【JavaScript】戻り値（return） - 関数の処理結果を値で返す

JavaScriptの戻り値について解説します。

検証環境

JavaScript -

macOS

14.1

戻り値

戻り値は“関数の処理結果を呼び出し元に返す仕組み”です。

戻り値を使うには『戻り値の定義』と『戻り値の受け取り』の処理を記述します。

戻り値の定義

関数の呼び出し元に返す値を関数に定義します。

基本構文

function 関数名( 仮引数１, 仮引数２ ... ) {
    // 処理...
    
    return 戻り値;
}

戻り値の定義はreturn 戻り値の部分です。

戻り値には変数などを記述でき、戻り値がないreturn;のみも可能です。

サンプル

sample.js

function addition( x, y ) {
    const result = x + y;
    ___ih_hl_start
    return result;
    ___ih_hl_end
}

Console

３行目のreturn resultが戻り値の定義です。

変数resultは仮引数xとyの合計値であり、その値を戻り値として返しています。

戻り値の受け取り

関数の呼び出し元で戻り値を受け取ることができます。

基本構文

関数名( 実引数１, 実引数２ ... )

戻り値のある関数の呼び出しは、戻り値がない場合と同じです。

サンプル

sample.js

function addition( x, y ) {
    const result = x + y;
    return result;
}

___ih_hl_start
console.log(addition(3, 8));
___ih_hl_end

Console

６行目でaddition関数を呼び出しています。

addition関数は変数resultを戻り値としており、６行目の呼び出しでは11が記憶されています。

呼び出し元では戻り値を受け取りますが、そのイメージは『関数の呼び出し』が『戻り値』に置き変わるイメージです。

例えば、６行目はconsole.log(addition(3, 8))の呼び出し部分であるaddition(3, 8)が11に置き変わり、console.log(11)となるイメージです。

そのため、実行結果のようにコンソールには11が出力されます。

また、戻り値は代入演算子で変数に記憶することも可能です。

sample.js

function addition( x, y ) {
    const result = x + y;
    return result;
}

___ih_hl_start
let total = addition(3, 8);
___ih_hl_end

console.log(total);

Console

こちらも『関数の呼び出し』が『戻り値』で置き変わるイメージで、let total = addition(3, 8)がlet total = 11と解釈すると分かりやすくなります。

複数のreturn

１つの関数に複数のreturnを定義できますが、returnを実行すると関数の処理は終了され、以降の処理は実行されません。

sample.js

function calc( x, y ) {
    console.log("Addition");
    const result1 = x + y;
    ___ih_hl_start
    return result1;
    ___ih_hl_end
    
    console.log("Subtraction");
    const result2 = x - y;
    ___ih_hl_start
    return result2;
    ___ih_hl_end
}

let result = calc(3, 8);

console.log(result);

Console

Addition
11

calc関数に２つのreturnがあります。

この関数は呼び出すと必ず１つ目のreturn（４行目）が実行されるため、以降の処理（６〜８行目）は実行されません。

そのため、複数のreturnを定義する場合は、if文などの条件分岐でreturnが実行されるケースを制御します。

sample.js

function calc( type, x, y ) {
    if( type == "+" ) {
        console.log("Addition");
        const result1 = x + y;
        return result1;
    } else if( type == "-" ) {
        console.log("Subtraction");
        const result2 = x - y;
        return result2;
    }
}

let r1 = calc("+", 3, 8);
console.log(r1);

let r2 = calc("-", 3, 8);
console.log(r2);

Console

Addition
11
Subtraction
-5